$(function() {
    // 产品页切换滑块
    $(".main-tit").movebg({
        width: 104 /*滑块的大小*/ ,
        extra: 20 /*额外反弹的距离*/ ,
        speed: 300 /*滑块移动的速度*/ ,
        rebound_speed: 400 /*滑块反弹的速度*/
    });
    // 产品详情页切换滑块
    $(".cent-left-tit").movebg({
            width: 96 /*滑块的大小*/ ,
            extra: 20 /*额外反弹的距离*/ ,
            speed: 300 /*滑块移动的速度*/ ,
            rebound_speed: 400 /*滑块反弹的速度*/
        });
    //tab

    $('.main-tit li').click(function() {
        $(this).addClass('cur').siblings().removeClass('cur');
        $('.main-cen .m-c-u').eq($(this).index()).fadeIn().siblings().hide();
    })

    $(".m-c-u li").hover(function() {
        $(this).find('.show-1').stop().fadeIn(1200);
        $(this).find('.show-3').stop().fadeIn(1000);
        $(this).find('.show-2').stop().animate({
            top: '0px'
        }, 300);
        $(this).find('img').stop().animate({
            width: '110%'
        })
        $(this).find('.product-border-hover').stop().animate({
            width: '100%'
        }, 600)
    }, function() {
        $(this).find('.show-1').stop().fadeOut(1200);
        $(this).find('.show-2').stop().animate({
            top: '-160px'
        }, 300);
        $(this).find('.product-border-hover').stop().animate({
            width: '0px'
        }, 600);
        $(this).find('img').stop().animate({
            width: '100%'
        })
        $(this).find('.show-3').stop().fadeOut(1000);
    })

    //产品详细

    //加

    $(document).on("click", ".tit-input .plus", function() {
        var length = $(this).prev().val();
        var number = parseInt(length) + 1;
        if (number > 9) {
            return;
        }
        $(this).prev().val(number);
    })

    //减

    $(document).on("click", ".tit-input .minus", function() {
        var length = $(this).next().val();
        var number = parseInt(length) - 1;
        if (number == 0) {
            return
        }
        $(this).next().val(number);
    })

    //li偶数

    $(".min-cent-right li:even").css("margin-left", "0px");

    //边框

    $(".min-cent-right li").hover(function() {
        $(this).find(".a1,.a3").stop().animate({
            width: '100%'
        }, 400)
        $(this).find(".a2,.a4").stop().animate({
            height: '100%'
        }, 400)
        $(this).find("img").stop().animate({
            width: '120%',
            left: '-15px',
            top: '-10px'
        })
    }, function() {
        $(this).find(".a1,.a3").stop().animate({
            width: '0px'
        }, 400)
        $(this).find(".a2,.a4").stop().animate({
            height: '0px'
        }, 400)
        $(this).find("img").stop().animate({
            width: '100%',
            left: '0px',
            top: '0px'
        })
    })

    //TAB

    $('.cent-left-tit li').click(function() {
        $(this).addClass('on-1').siblings().removeClass('on-1');
        $('.cent-left-view .left-view').eq($(this).index()).fadeIn().siblings().hide();
    })

    //单个选项勾选

    $('.radio2-label > label').click(function() {
        var radioId = $(this).find('input').attr('name');
        $(this).addClass('checked').siblings().removeClass('checked');
        $(this).find('input').attr('checked', 'true');
        $(this).siblings().find('input').removeAttr('checked')
    });

    //好评、中评、差评

    $(".comment li").each(function(i, e) {
        if ($(e).hasClass("comment-praise")) {
            $(this).find(".praise-on").html("(好评)");
            $(this).find(".praise-on").css("color", "#e8b768");
        }
        if ($(e).hasClass("comment-in")) {
            $(this).find(".praise-on").html("(中评)");
        }
        if ($(e).hasClass("comment-bad")) {
            $(this).find(".praise-on").html("(差评)");
        }
    })

    //赞、踩

    $(".comment-right-footer .fabulous").one("click", function() {
        var tenth1 = $(this).find("strong");
        var num1 = tenth1.text();
        $(this).find("i").html("已赞");
        $(this).css("color", "#e8b768");
        $(this).prepend("<em>+1</em>");
        $(this).find('strong').text(num1 - 0 + 1);
    });

    $(".comment-right-footer .step").one("click", function() {
        var tenth2 = $(this).find("strong");
        var num2 = tenth2.text();
        $(this).find("i").html("已踩");
        $(this).css("color", "#e8b768");
        $(this).prepend("<em>+1</em>");
        $(this).find('strong').text(num2 - 0 + 1);
    });

    $(this).find(".comment-right-footer em").animate({
        opacity: '1',
        top: '5px',
        opacity: '0'
    }, 5000);

    //字数限制

    $(".user-input textarea").keyup(function() {
        var len = $(this).val().length;
        if (len > 300) {
            $(this).val($(this).val().substring(0, 301));
            $("#limit").css("color", "#dd0000");
        }
        if (len <= 300) {
            $("#limit").css("color", "#787878");
        }
        var num = 0 + len;
        $("#limit").text(num);
    });

    //获取全部评价、好评、中评、差评数量

    var whole = $(".comment li").length; //获取全部评价
    var praise = $(".comment-praise").length; //获取全部好评
    var secondary = $(".comment-in").length; //获取全部中评
    var bad = $(".comment-bad").length; //获取全部差评

    $("#whole").html(whole); //输出全部评价
    $("#praise").html(praise); //输出全部好评
    $("#in").html(secondary); //输出全部中评
    $("#bad").html(bad); //输出全部差评

    //购物图片TAB

    $('.tit-text-left li').click(function() {
        $(this).addClass('cent-on').siblings().removeClass('cent-on');
        $('.tit .tit-text').eq($(this).index()).fadeIn().siblings().hide();
    })

    // 搜索页面
    // 焦点
    var search = $('.search-input input');
    search.focus(function() {
        if (search.val() == '') {
            search.val('请输入关键字');
        } else if (search.val() == '请输入关键字') {
            search.val('');
        }
        $('.main-tit .search-input').css({ 'border-color': '#e8b768', 'transition': '1s' })
        $('.search-input span').css({ 'background-image': 'url(img/main/searchh.png)' })
    })
    search.blur(function() {
        if (search.val() == '') {
            search.val('请输入关键字');
        }
        $('.main-tit .search-input').css({ 'border-color': '#3c3c3c', 'transition': '1s' })
        $('.search-input span').css({ 'background-image': 'url(img/main/search.png)' })
    })

    // 判断有没有结果

    var NO_result = "<div class=NO_result></div>"
    var NO_result_li = $('.main-cen');
    if (!NO_result_li.has('li').length) {
        $('.main').append(NO_result)
        $('.main-tit .number').html('0')
    }

    $(document).ready(function() {
        //drawProcess();  
        i = 0;
        var t = setInterval("addNum(60,60)", 20);
    });

})

function addNum(percent, width) {
    if (i < percent) {
        i++;
        $('canvas.process').text(i + "%");
        drawProcess(width);
    } else {
        clearInterval(t);
    }
}

function drawProcess(width) {
    $('canvas.process').each(function() {
        var text = $(this).text();
        var process = text.substring(0, text.length - 1);
        var canvas = this;
        var context = canvas.getContext('2d');
        context.clearRect(0, 0, width, width);

        context.beginPath();
        context.moveTo(width / 5, width / 5);
        context.arc(width / 2, width / 2, width / 2, 0, Math.PI * 2, false);
        context.closePath();
        context.fillStyle = '#3c3c3c';
        context.fill();

        context.beginPath();
        context.moveTo(width / 2, width / 2);
        context.arc(width / 2, width / 2, width / 2, 30, Math.PI * 2 * process / 100, false);
        context.closePath();
        context.fillStyle = '#e8b768';
        context.fill();

        context.beginPath();
        context.moveTo(width / 2, width / 2);
        context.arc(width / 2, width / 2, width / 2 - 5, 0, Math.PI * 2, true);
        context.closePath();
        context.fillStyle = '#171717';
        context.fill();

        context.beginPath();
        context.closePath();
        context.strokeStyle = '#171717';
        context.stroke();
        context.font = "16px SingleMaltaRegular";
        context.fillStyle = '#787878';
        context.textAlign = 'center';
        context.textBaseline = 'middle';
        context.moveTo(width / 2, width / 2);
        context.fillText(text, width / 2, width / 2);
    });
}
